<template>
  <div>
    <el-row class="title" :gutter="40">
      <el-col :span="4"><span class="bold">数据分析</span></el-col>
      <!-- <el-col :span="3"></el-col>
      <el-col :span="10">
        <label for=""></label>
        <div class="block">
          <span class="demonstration">统计日期</span>
          <el-date-picker
            v-model="time"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="7">
        <el-row>
          <el-col :span="5" :offset="1">
            <span>今天</span>
          </el-col>
          <el-col :span="5" :offset="1">
            <span>明天</span>
          </el-col>
          <el-col :span="5" :offset="1">
            <span>最近7天</span>
          </el-col>
          <el-col :span="5" :offset="1">
            <span>最近30天</span>
          </el-col>
        </el-row>
      </el-col> -->
    </el-row>
    <el-row :gutter="40" class="top">
      <el-col :span="6">
        <el-card>
          <div>
            <p>支付金额(元)</p>
            <p class="size">{{ $store.state.situation.payMoney }}</p>
            <p>
              较上期&nbsp;&nbsp;&nbsp;<span class="green"
                ><i class="el-icon-caret-top"></i>12%</span
              >
            </p>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6"
        ><el-card>
          <div>
            <p>支付笔数</p>
            <p class="size">{{ $store.state.situation.troke }}</p>
            <p>
              较上期&nbsp;&nbsp;&nbsp;<span class="green"
                ><i class="el-icon-caret-top"></i>12%</span
              >
            </p>
          </div></el-card
        ></el-col
      >
      <el-col :span="6"
        ><el-card>
          <div>
            <p>支付会员数</p>
            <p class="size">{{ $store.state.situation.payMember }}</p>
            <p>
              较上期&nbsp;&nbsp;&nbsp;<span class="green"
                ><i class="el-icon-caret-top"></i>12%</span
              >
            </p>
          </div></el-card
        ></el-col
      >
      <el-col :span="6"
        ><el-card>
          <div>
            <p>支付客单价(员)</p>
            <p class="size">{{ $store.state.situation.price }}</p>
            <p>
              较上期&nbsp;&nbsp;&nbsp;<span class="green"
                ><i class="el-icon-caret-top"></i>12%</span
              >
            </p>
          </div></el-card
        ></el-col
      >
    </el-row>
    <el-row :gutter="40" class="middle">
      <el-col :span="12"
        ><el-card> <div id="payment-chart"></div> </el-card
      ></el-col>
      <el-col :span="12"
        ><el-card> <div id="order-chart"></div> </el-card
      ></el-col>
    </el-row>
    <!-- <el-row :gutter="40" class="center">
      <el-col
        ><el-card> <div id="people-chart"></div> </el-card
      ></el-col>
    </el-row> -->
    <!-- <el-row :gutter="40" class="foot">
      <el-col :span="12"
        ><el-card> <div id="amount-chart"></div> </el-card
      ></el-col>
      <el-col :span="12"
        ><el-card> <div id="customers-chart"></div> </el-card
      ></el-col>
    </el-row> -->
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data: function () {
    return {
      //时期
      time: "",
    };
  },
  created() {
    this.$store.dispatch("getPayMoney");
    this.$store.dispatch("getTroke");
    this.$store.dispatch("getPrice");
    this.$store.dispatch("getPayMerber");
  },
  mounted() {
    this.createPayment();
    this.createOrder();
    // this.createPeople();
    // this.createAmount();
    // this.createCustomers();
  },
  methods: {
    createPayment() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("payment-chart"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "支付金额",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六",
            "星期天",
          ],
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              color: "#999",
              type: "dashed",
            },
          },
        },
        series: [
          {
            data: [...this.$store.state.situation.payMoneyList],
            type: "line",
            smooth: true,
            lineStyle: {
              width: 6,
            },
            symbol: "none",
          },
        ],
      });
    },
    createOrder() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("order-chart"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "支付订单数",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六",
            "星期天",
          ],
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              color: "#999",
              type: "dashed",
            },
          },
        },
        series: [
          {
            data: [...this.$store.state.situation.trokeList],
            type: "line",
            smooth: true,
            lineStyle: {
              width: 6,
              color: "#66CC00",
            },
            symbol: "none",
          },
        ],
      });
    },
    // createPeople() {
    //   // 基于准备好的dom，初始化echarts实例
    //   var myChart = echarts.init(document.getElementById("people-chart"));
    //   // 绘制图表
    //   myChart.setOption({
    //     title: {
    //       text: "支付人数统计（小时）",
    //     },
    //     grid: {
    //       left: "3%",
    //       right: "4%",
    //       bottom: "3%",
    //       containLabel: true,
    //     },
    //     xAxis: {
    //       type: "category",
    //       axisTick: {
    //         alignWithLabel: true,
    //       },
    //       data: [
    //         "00",
    //         "01",
    //         "02",
    //         "03",
    //         "04",
    //         "05",
    //         "06",
    //         "07",
    //         "08",
    //         "09",
    //         "10",
    //         "11",
    //         "12",
    //         "13",
    //         "14",
    //         "15",
    //         "16",
    //         "17",
    //         "18",
    //         "19",
    //         "20",
    //         "21",
    //         "22",
    //         "23",
    //         "24",
    //       ],
    //     },
    //     yAxis: {
    //       type: "value",
    //       splitLine: {
    //         lineStyle: {
    //           color: "#999",
    //           type: "dashed",
    //         },
    //       },
    //     },
    //     series: [
    //       {
    //         data: [
    //           120, 200, 150, 80, 70, 110, 130, 70, 70, 70, 70, 70, 70, 70, 70,
    //           70, 70, 70, 70, 70, 70, 70, 70, 70, 70,
    //         ],
    //         type: "bar",
    //       },
    //     ],
    //   });
    // },
    // createAmount() {
    //   // 基于准备好的dom，初始化echarts实例
    //   var myChart = echarts.init(document.getElementById("amount-chart"));
    //   // 绘制图表
    //   myChart.setOption({
    //     title: {
    //       text: "成交金额占比",
    //     },
    //     tooltip: {
    //       trigger: "item",
    //       formatter: "{a} <br/>{b} : {c} ({d}%)",
    //     },
    //     legend: {
    //       right: 10,
    //       icon: "circle",
    //     },
    //     series: [
    //       {
    //         name: "访问来源",
    //         type: "pie",
    //         radius: ["45%", "60%"],
    //         data: [
    //           { value: 1048, name: "新顾客" },
    //           { value: 735, name: "老顾客" },
    //         ],
    //         emphasis: {
    //           itemStyle: {
    //             shadowBlur: 10,
    //             shadowOffsetX: 0,
    //             shadowColor: "rgba(0, 0, 0, 0.5)",
    //           },
    //         },
    //         itemStyle: {
    //           normal: {
    //             label: {
    //               show: true,
    //               formatter: "{b} : {c} ({d}%)",
    //             },
    //             labelLine: { show: true },
    //           },
    //         },
    //       },
    //     ],
    //   });
    // },
    // createCustomers() {
    //   // 基于准备好的dom，初始化echarts实例
    //   var myChart = echarts.init(document.getElementById("customers-chart"));
    //   // 绘制图表
    //   myChart.setOption({
    //     title: {
    //       text: "成交客户数占比",
    //     },
    //     tooltip: {
    //       trigger: "item",
    //       formatter: "{a} <br/>{b} : {c} ({d}%)",
    //     },
    //     legend: {
    //       right: 10,
    //       icon: "circle",
    //     },
    //     series: [
    //       {
    //         name: "访问来源",
    //         type: "pie",
    //         radius: ["45%", "60%"],
    //         data: [
    //           { value: 1048, name: "新顾客" },
    //           { value: 735, name: "老顾客" },
    //         ],
    //         emphasis: {
    //           itemStyle: {
    //             shadowBlur: 10,
    //             shadowOffsetX: 0,
    //             shadowColor: "rgba(0, 0, 0, 0.5)",
    //           },
    //         },
    //         itemStyle: {
    //           normal: {
    //             label: {
    //               show: true,
    //               formatter: "{b} : {c} ({d}%)",
    //             },
    //             labelLine: { show: true },
    //           },
    //         },
    //       },
    //     ],
    //   });
    // },
  },
};
</script>
<style scoped lang="less">
.el-card {
  border-radius: 16px;
}
.el-card:hover {
  border: 3.5px solid #1890ff;
}
.green {
  color: #90d96c;
}
.el-card:hover {
  border: 3.5px solid #1890ff;
}
.title {
  margin-bottom: 10px;
  height: 60px;
  .el-col {
    height: 60px;
    line-height: 60px;
    .bold {
      font-size: 24px;
      font-weight: bold;
    }
    .demonstration {
      margin-right: 20px;
      margin-left: 12px;
    }
  }
}
.top {
  margin-bottom: 40px;
  .el-card {
    height: 160px;
  }
  > .el-col {
    height: 146px;
    p {
      margin-bottom: 10px;
    }
  }
  .size {
    font-size: 36px;
    font-weight: bold;
  }
}
.middle {
  margin-bottom: 20px;
  .el-card {
    height: 454px;
    #payment-chart,
    #order-chart {
      height: 414px;
    }
  }
}
.center {
  margin-bottom: 20px;
  .el-card {
    height: 454px;
    // #people-chart {
    //   height: 414px;
    // }
  }
}
// .foot {
//   margin-bottom: 20px;
//   .el-card {
//     height: 382px;
//     #amount-chart,
//     #customers-chart {
//       height: 342px;
//     }
//   }
// }
</style>
